<template>
    <div class="wrapper-second">
        <section>
				<div class="title">
					<h2>小米闪购</h2>
					<div class="btn-box">
						<div class="btn-box-left" id="btnBoxLeft" @click="leftEvent" :style="leftButtonStyle"><i class="fa fa-angle-left"></i></div>
						<div class="btn-box-right" id="btnBoxRight" @click="rigthEvent" :style="rightButtonStyle"><i class="fa fa-angle-right"></i></div>
					</div>
				</div>
				<div class="running-horse">
					<div class="left">
						<h4>24:00 场</h4>
						<img src="src/assets/img/shangou.png">
						<p>距离结束还有</p>
						<div class="count-down">
							<div id="hours">{{ hours }}</div>
							<span>:</span>
							<div id="minutes">{{ minutes }}</div>
							<span>:</span>
							<div id="seconds">{{ seconds }}</div>
						</div>
					</div>
					<div class="right">
                        <div class="scroll-box" id="scrollBox" :style="'left:'+style">
                            <ul>
                                <li v-for="product in products" :key="product.id">
                                     <img :src="product.image">
                                        <p>{{ product.name }}</p>
                                        <p>{{ product.description }}</p>
                                        <p>{{ product.price }} <span>{{ product.originalPrice }}</span></p>
                                </li>
                            </ul>
                        </div>
                    </div>
				</div>
				
				<!-- 各种产品区域 -->
				<div class="area" v-for="otherProduct in otherProducts" :key="otherProduct.id">
					<div class="area-img">
						<img :src="otherProduct.img">
					</div>
					<h3>{{otherProduct.name}}</h3>
					<ul>
						<li><img :src=otherProduct.imgs></li>
						<li v-for="(otherproduct,otherproductIndex) in otherProduct.products" :key="otherproductIndex">
							<img class="area-item-img" :src=otherproduct.image>
							<p>{{otherproduct.name}}</p>
							<p>{{otherproduct.description}}</p>
							<p>{{ otherproduct.price }} <span>{{otherproduct.originalPrice}}</span></p>
						</li>
					</ul>
				</div>
			</section>
    </div>
</template>
<script>
export default {
    data(){
        return {
          hours:'02',
          minutes:'14',
          seconds:'33',
          scrollIndex : 0,
          left : 0,
          style:'',
            products: [
        {
          id: 1,
          image: "src/assets/img/shangou_goods01.png",
          name: "小米无线鼠标 Lite 黑色",
          description: "简约设计 轻盈握感",
          price: "29元",
          originalPrice: "39元"
        },
        {
          id: 2,
          image: "src/assets/img/shangou_goods02.png",
          name: "积木 沙漠赛车 白色",
          description: "炫酷的贴身玩伴",
          price: "69元",
          originalPrice: "129元"
        },
        {
  id: 3,
  image: "src/assets/img/shangou_goods03.png",
  name: "小米小爱智能闹钟 白色",
  description: "能听会说的人工智能闹钟",
  price: "139元",
  originalPrice: "149元"
},
{
  id: 4,
  image: "src/assets/img/shangou_goods04.png",
  name: "米家三门冰箱215L 银色",
  description: "三温区高效保鲜",
  price: "1199元",
  originalPrice: "1499元"
},
{
  id: 5,
  image: "src/assets/img/shangou_goods05.png",
  name: "小米有线耳机（K歌版）白色",
  description: "我的私人KTV",
  price: "149元",
  originalPrice: "169元"
},
{
  id: 6,
  image: "src/assets/img/shangou_goods06.png",
  name: "巨省电 | 小米新1级空调A 1.5匹",
  description: "变频节能巨省电，自清洁",
  price: "2199元",
  originalPrice: "2399元"
},
{
  id: 7,
  image: "src/assets/img/shangou_goods07.png",
  name: "小米移动电源3 10000mAh",
  description: "大容量，超级闪充",
  price: "139元",
  originalPrice: "149元"
},
{
  id: 8,
  image: "src/assets/img/shangou_goods08.png",
  name: "RedmiBook 13 i7 8G",
  description: "让高性能全面展现",
  price: "4499元",
  originalPrice: "5499元"
},

    ],
    otherProducts:[
        {
            name:"家电",
            img:"src/assets/img/areaLogoImg01.png",
            imgs:"src/assets/img/areaImg01_01.png",
            products:[
            {
            id: 1,
            image: "src/assets/img/areaImg01_02.png",
            name: "Redmi 红米电视 70英寸",
            description: "70英寸震撼巨屏，4K画质，细腻如真",
            price: "3299元",
            originalPrice: "3799元"
          },
          {
            id: 2,
            image: "src/assets/img/areaImg01_03.png",
            name: "小米全面屏电视E32C",
            description: "全面屏设计，人工智能系统",
            price: "1299元",
            originalPrice: "2799元"
          },
          {
            id: 3,
            image: "src/assets/img/areaImg01_04.png",
            name: "小米全面屏电视E55A",
            description: "全面屏设计，人工智能系统",
            price: "2299元",
            originalPrice: "2799元"
          },
          {
            id: 4,
            image: "src/assets/img/areaImg01_05.png",
            name: "米家空调",
            description: "出众静音，快速制冷热",
            price: "1499元",
            originalPrice: "1799元"
          },
          {
            id: 5,
            image: "src/assets/img/areaImg01_07.png",
            name: "米家互联网洗烘一体机 Pro 10kg",
            description: "智能洗烘，省心省力",
            price: "2999元",
            originalPrice: "3999元"
          },
          {
            id: 6,
            image: "src/assets/img/areaImg01_08.png",
            name: "Redmi全自动波轮洗衣机1A 8kg",
            description: "一键操作，父母都爱用",
            price: "849元",
            originalPrice: "899元"
          },
          {
            id: 7,
            image: "src/assets/img/areaImg01_09.png",
            name: "Air 13.3\" 2019款",
            description: "新一代独立显卡",
            price: "5699元",
            originalPrice: "5999元"
          },
          {
            id: 8,
            image: "src/assets/img/areaImg01_10.png",
            name: "米家互联网烟灶套装（天然气）",
            description: "点火排烟，风随火动",
            price: "2099元",
            originalPrice: "2299元"
          }
            ],

        },

        {
            name:"智能",
            img:"src/assets/img/areaLogoImg02.png",
            imgs:"src/assets/img/areaImg02_01.png",
            products:[
            {
            id: 1,
            image: "src/assets/img/areaImg01_02.png",
            name: "Redmi 红米电视 70英寸",
            description: "70英寸震撼巨屏，4K画质，细腻如真",
            price: "3299元",
            originalPrice: "3799元"
          },
          {
            id: 2,
            image: "src/assets/img/areaImg01_03.png",
            name: "小米全面屏电视E32C",
            description: "全面屏设计，人工智能系统",
            price: "1299元",
            originalPrice: "2799元"
          },
          {
            id: 3,
            image: "src/assets/img/areaImg01_04.png",
            name: "小米全面屏电视E55A",
            description: "全面屏设计，人工智能系统",
            price: "2299元",
            originalPrice: "2799元"
          },
          {
            id: 4,
            image: "src/assets/img/areaImg01_05.png",
            name: "米家空调",
            description: "出众静音，快速制冷热",
            price: "1499元",
            originalPrice: "1799元"
          },
          {
            id: 5,
            image: "src/assets/img/areaImg01_07.png",
            name: "米家互联网洗烘一体机 Pro 10kg",
            description: "智能洗烘，省心省力",
            price: "2999元",
            originalPrice: "3999元"
          },
          {
            id: 6,
            image: "src/assets/img/areaImg01_08.png",
            name: "Redmi全自动波轮洗衣机1A 8kg",
            description: "一键操作，父母都爱用",
            price: "849元",
            originalPrice: "899元"
          },
          {
            id: 7,
            image: "src/assets/img/areaImg01_09.png",
            name: "Air 13.3\" 2019款",
            description: "新一代独立显卡",
            price: "5699元",
            originalPrice: "5999元"
          },
          {
            id: 8,
            image: "src/assets/img/areaImg01_10.png",
            name: "米家互联网烟灶套装（天然气）",
            description: "点火排烟，风随火动",
            price: "2099元",
            originalPrice: "2299元"
          }
            ],

        },
        {
            name:"搭配",
            img:"src/assets/img/areaLogoImg03.png",
            imgs:"src/assets/img/areaImg03_01.png",
            products:[
            {
            id: 1,
            image: "src/assets/img/areaImg01_02.png",
            name: "Redmi 红米电视 70英寸",
            description: "70英寸震撼巨屏，4K画质，细腻如真",
            price: "3299元",
            originalPrice: "3799元"
          },
          {
            id: 2,
            image: "src/assets/img/areaImg01_03.png",
            name: "小米全面屏电视E32C",
            description: "全面屏设计，人工智能系统",
            price: "1299元",
            originalPrice: "2799元"
          },
          {
            id: 3,
            image: "src/assets/img/areaImg01_04.png",
            name: "小米全面屏电视E55A",
            description: "全面屏设计，人工智能系统",
            price: "2299元",
            originalPrice: "2799元"
          },
          {
            id: 4,
            image: "src/assets/img/areaImg01_05.png",
            name: "米家空调",
            description: "出众静音，快速制冷热",
            price: "1499元",
            originalPrice: "1799元"
          },
          {
            id: 5,
            image: "src/assets/img/areaImg01_07.png",
            name: "米家互联网洗烘一体机 Pro 10kg",
            description: "智能洗烘，省心省力",
            price: "2999元",
            originalPrice: "3999元"
          },
          {
            id: 6,
            image: "src/assets/img/areaImg01_08.png",
            name: "Redmi全自动波轮洗衣机1A 8kg",
            description: "一键操作，父母都爱用",
            price: "849元",
            originalPrice: "899元"
          },
          {
            id: 7,
            image: "src/assets/img/areaImg01_09.png",
            name: "Air 13.3\" 2019款",
            description: "新一代独立显卡",
            price: "5699元",
            originalPrice: "5999元"
          },
          {
            id: 8,
            image: "src/assets/img/areaImg01_10.png",
            name: "米家互联网烟灶套装（天然气）",
            description: "点火排烟，风随火动",
            price: "2099元",
            originalPrice: "2299元"
          }
            ],

        },
        {
            name:"周边",
            img:"src/assets/img/areaLogoImg04.png",
            imgs:"src/assets/img/areaImg04_01.png",
            products:[
            {
            id: 1,
            image: "src/assets/img/areaImg01_02.png",
            name: "Redmi 红米电视 70英寸",
            description: "70英寸震撼巨屏，4K画质，细腻如真",
            price: "3299元",
            originalPrice: "3799元"
          },
          {
            id: 2,
            image: "src/assets/img/areaImg01_03.png",
            name: "小米全面屏电视E32C",
            description: "全面屏设计，人工智能系统",
            price: "1299元",
            originalPrice: "2799元"
          },
          {
            id: 3,
            image: "src/assets/img/areaImg01_04.png",
            name: "小米全面屏电视E55A",
            description: "全面屏设计，人工智能系统",
            price: "2299元",
            originalPrice: "2799元"
          },
          {
            id: 4,
            image: "src/assets/img/areaImg01_05.png",
            name: "米家空调",
            description: "出众静音，快速制冷热",
            price: "1499元",
            originalPrice: "1799元"
          },
          {
            id: 5,
            image: "src/assets/img/areaImg01_07.png",
            name: "米家互联网洗烘一体机 Pro 10kg",
            description: "智能洗烘，省心省力",
            price: "2999元",
            originalPrice: "3999元"
          },
          {
            id: 6,
            image: "src/assets/img/areaImg01_08.png",
            name: "Redmi全自动波轮洗衣机1A 8kg",
            description: "一键操作，父母都爱用",
            price: "849元",
            originalPrice: "899元"
          },
          {
            id: 7,
            image: "src/assets/img/areaImg01_09.png",
            name: "Air 13.3\" 2019款",
            description: "新一代独立显卡",
            price: "5699元",
            originalPrice: "5999元"
          },
          {
            id: 8,
            image: "src/assets/img/areaImg01_10.png",
            name: "米家互联网烟灶套装（天然气）",
            description: "点火排烟，风随火动",
            price: "2099元",
            originalPrice: "2299元"
          }
            ],

        }
    ]
        }
    },
    computed:{
      leftButtonStyle() {
        return {
          color:this.scrollIndex === 0? '#E0E0E0' : '#b0b0b0',
        };
      },
      rightButtonStyle() {
        return {
          color: this.scrollIndex === 2 ? '#E0E0E0' : (this.scrollIndex === 1 ? '#FF6700' : '#b0b0b0'),
        };
      },
    },
    methods: {
      rigthEvent(){
        console.log("rightEvent");
        this.scrollIndex++;
        if(this.scrollIndex > 2){
          this.scrollIndex = 2;
        }
        this.scrollContent();
        this.color
      },
      leftEvent(){
        console.log("leftEvent");
        this.scrollIndex--;
        if(this.scrollIndex<0){
          this.scrollIndex=0;
        }
        this.scrollContent();
      },
      scrollContent(){
        console.log("scrollContent");
        let targetLeft = this.scrollIndex * -978;
        const speed = 30;
        if(this.left<targetLeft){
          const time = setInterval(()=>{
            this.left+=50;
            if(this.left>=targetLeft){
              clearInterval(time);
            }
            this.style = this.left+'px';
          },speed);
        }else if(this.left>targetLeft){
          const time = setInterval(()=>{
            this.left -= 60;
            if(this.left <= targetLeft){
              clearInterval(time);
            }
            this.style = this.left+'px';
          },speed);
        }
      },
      startCountdown(){
        const interval = setInterval(()=>{
          let h = parseInt(this.hours);
          let m = parseInt(this.minutes);
          let s = parseInt(this.seconds);
          if(s>0){
            s--;
          }else{
            if(m>0){
              m--;
              s = 59;
            }else{
              if(h>0){
                h--;
                m = 59;
                s = 59;
              }else{
                clearInterval(interval);
              }
            }
          }
          this.hours = h<10?`0${h}` : h.toString();
          this.minutes = m<10?`0${m}` : m.toString();
          this.seconds = s<10?`0${s}` : s.toString();
        },1000);
      }
    },
    mounted() {
      this.startCountdown()
    },
}
</script>